<template>
    <view class="search-box">
            <my-search @click="gotoSearch"></my-search>
    </view>
    <view>
        <!-- 轮播图 -->
        <swiper :indicator-dots="true" :autoplay="true" :interval="1000" :duration="1000" :circular="true">
            <swiper-item v-for="(item, i) in swiperList" :key="i">
                <navigator class="swiper-item" :url="'/subpkg/good_detail/good_detail?goods_id='+item.goods_id">
                    <image :src="item.image_src" ></image>
                </navigator>
            </swiper-item>
        </swiper>
        <!-- 分类导航区域 -->
        <view class="nav-list">
            <view class="nav-item" v-for="(item,i) in navelist" :key="i" @click="navClickHandler(item)">
                <image :src="item.image_src" class="nav-image"></image>
            </view>
        </view>
        <!-- 楼层区域 -->
        <!-- 楼层的容器 -->
        <view class="floor-list">
            <!-- 每一个楼层的item项 -->
            <view class="floor-item" v-for="(item, i ) in floorlist" :key="i">
                <!-- 楼层的标题 -->
                <image :src="item.floor_title.image_src" class="floor-title"></image>
                <!-- 楼层的图片区域 -->
                <view class="floor-img-box">
                    <!-- 左侧大图片区域 -->
                    <navigator class="left-img-box" :url="item.product_list[0].url">
                        <img :src="item.product_list[0].image_src" :style="{width:item.product_list[0].image_width +'rpx'}" mode="widthFix" />
                    </navigator>
                    <!-- 右侧小图片区域 -->
                    <view class="right-imge-box">
                        <navigator class="right-imge-item" v-for="(item2,i2) in item.product_list" :key="i2" v-if="i2 !== 0" :url="item2.url">
                            <image :src="item2.image_src" :style="{width: item2.image_width +'rpx' }" v-if="i2 !==0" mode="widthFix"></image>
                            
                        </navigator>
                        
                    </view>
                    
                </view>
            </view>
            
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                // 这是轮播图的数据列表
                swiperList:[],
                // 分类导肮数据
                navelist:[],
                // 楼层数据
                floorlist:[],
            };
        },
        onLoad() {
            // 调用方法，获取轮播图数据
            this.getSwiperList()
            this.getNavlist()
            this.getFloorlist()
        },
        methods: {
            gotoSearch(){
                uni.navigateTo({
                    url:'/subpkg/search/search'
                })
            },
              async getSwiperList(){
                  const {data:res} = await uni.$http.get('https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata')
                  if(res.meta.status !== 200) return uni.$showMsg("数据请求失败")
                  // {
                  //     return uni.showToast({
                  //         title:'数据请求失败！',
                  //         duration:1500,
                  //         icon:'none'
                  //     })
                  // }
                  this.swiperList = res.message
                  uni.$showMsg('数据加载成功')
            },
            async getNavlist(){
                const {data:res} = await uni.$http.get('https://api-hmugo-web.itheima.net/api/public/v1/home/catitems')
                if(res.meta.status !== 200) return uni.$showMsg("数据请求失败")
                this.navelist = res.message
            },
                // 获取楼层数据
            async getFloorlist(){
                const {data:res} = await uni.$http.get('http://api-hmugo-web.itheima.net/api/public/v1/home/floordata')
                if(res.meta.status !==200)return uni.$showMsg("数据请求失败")
                
                // 对数据进行处理
                res.message.forEach(floor => {
                    floor.product_list.forEach(prod => {
                        prod.url = '/subpkg/goods_list/goods_list?' + prod.navigator_url.split('?')[1]
                        
                    })
                })
                
                this.floorlist = res.message 
            },
                
            navClickHandler(item){
                    if(item.name == '分类') {
                        uni.switchTab({
                            url:'/pages/cate/cate'
                        })
                    }
            }
        },
}
              
</script>

<style lang="scss">
swiper{
    height: 330rpx;
    .swiper-item,
    image{
        width:100%;
        height:100%;
    }
}
 .nav-list{
     display: flex;
     justify-content: space-around;
     margin: 15px 0;
 }
     
 .nav-image{
     width:128rpx;
     height: 140rpx;
 }
 .floor-title{
     width: 100%;
     height: 60rpx;
 }
 .right-imge-box{
     display: flex;
     flex-wrap: wrap;
     justify-content: space-around;
 }
 
 .floor-img-box{
     display: flex;
     padding-left: 10rpx;
 }
 .search-box{
     // 定义吸底效果
     position: sticky;
     // 吸顶的位置
     top:0;
     // 提高层级，防止被覆盖
     z-index: 999;
 }
 
</style>
